<template>
  <el-dialog title="新增用户"
             :visible.sync="dialogVisible"
             @close="close">
    <el-form status-icon
             :rules="rules"
             ref="formData"
             class="demo-ruleForm"
             :model="formData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名"
                        prop="name"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄"
                        prop="age"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身高"
                        prop="height"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.height"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重"
                        prop="weight"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.weight"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="ID"
                        prop="id"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.id"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话"
                        prop="phone"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="Email"
                        prop="email"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.email"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址"
                        prop="address"
                        :label-width="formLabelWidth">
            <el-input size="small"
                      v-model="formData.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="resetForm('formData')">重置</el-button>
      <el-button type="primary"
                 @click="submitForm('formData')">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visiable: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      dialogVisible: this.visiable,
      formData: {
        id: '',
        name: '',
        height: '',
        weight: '',
        age: '',
        phone: '',
        email: '',
        address: ''
      },
      rules: {
        id: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入email', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      },
      formLabelWidth: '80px'
    };
  },
  created () {
    console.log('created')
  },
  methods: {
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    close () {
      this.$emit('func', this.dialogVisible)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //延时函数模拟接口
          setTimeout(() => {
            this.$message.success("添加成功")
            this.dialogVisible = false
            this.$emit('sendSuccess', true)
          }, 1000)
        } else {
          this.$message.warning("请将必填选项填写后再进行提交")
          return false;
        }
      })
    }
  }
}
</script>

<style lang="less">
.el-form {
  .el-form-item {
    .el-form-item__label {
      font-weight: 700;
    }
  }
}
</style>